// pages/recommend/components/banner_detail.js
const computedBehavior = require('miniprogram-computed').behavior
import { formatPrice } from '../../../utils/util'

const bannerConfig = {
  baseAmount: 30,
  payCode: 'https://cdn.siryin.factorio.top/usr/uploads/2018/09/2742082513.png',
}
// 停留时间
const intervals = [
  { id: 1, seconds: 3, price: 0 },
  { id: 2, seconds: 4, price: 5 },
  { id: 3, seconds: 5, price: 10 },
  { id: 4, seconds: 6, price: 15 },
  { id: 5, seconds: 7, price: 20 },
  { id: 6, seconds: 8, price: 25 },
  { id: 7, seconds: 9, price: 30 },
  { id: 8, seconds: 10, price: 35 },
]
// 标签
const tags = [
  { id: 0, tag: '不需要', tagColor: '', price: 0, },
  { id: 1, tag: '限时推广', tagColor: '#07c160', price: 15, },
  { id: 2, tag: '站长推荐', tagColor: '#ff6827', price: 20, },
  { id: 3, tag: '访问最多', tagColor: '#00a1d6', price: 25, },
  { id: 4, tag: '收藏最多', tagColor: '#f44', price: 25, },
]
// 我的程序
const products = [
  { 
    id: 1, 
    logo: '/assets/images/common/cover.png',
    name: '靠团',
    appId: 'wx78821d601fc82ff9',
    appPath: '/pages/home/index',
    appQuery: 'id=1',
  },
  {
    id: 2, 
    logo: '/assets/images/common/cover.png',
    name: '淘宝',
    appId: 'wx78821d601fc82ff9',
    appPath: '/pages/home/index',
    appQuery: 'id=1',
  }
]

Component({
  behaviors: [computedBehavior],

  /**
   * 组件的属性列表
   */
  properties: {
    edit: { // 是否编辑页
      type: Boolean,
      value: false
    },
    recommend: { // 是否是推荐模块
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    postForm: {
      coverUrl: '',
      intervalId: 0,
      tagId: 0,
      productId: 0,
      totalAmount: 0,
    },
    // 基础配置
    bannerConfig: {},
    // 停留时间
    showInterval: false,
    intervalTip: '',
    intervalIndex: 0,
    intervals: [],
    // 标签
    showTag: false,
    tagIndex: 0,
    tags: [],
    // 跳转程序
    showProduct: false,
    productIndex: 0,
    products: [],
    // 费用明细
    amountDetail: {
      baseAmount: 0,
      intervalAmount: 0,
      tagAmount: 0,
      totalAmount: 0,
    },
  },

  watch: {
    'bannerConfig,intervalIndex,tagIndex'() {
      const baseAmount = Number(this.data.bannerConfig.baseAmount)
      const intervalAmount = Number(this.getIntervalAmount())
      const tagAmount = Number(this.getTagAmount())
      const totalAmount = baseAmount + intervalAmount + tagAmount
      this.data.amountDetail = {
        baseAmount: formatPrice(baseAmount),
        intervalAmount: formatPrice(intervalAmount),
        tagAmount: formatPrice(tagAmount),
        totalAmount: formatPrice(totalAmount),
      }
      this.setData({
        amountDetail: this.data.amountDetail,
        'postForm.totalAmount': totalAmount
      })
    }
  },

  lifetimes: {
    attached() {
      const formatIntervals = intervals.map(item => {
        item.name = item.seconds
        return item
      })
      const formatTags = tags.map(item => {
        item.name = item.tag
        return item
      })
      // 初始化默认值
      this.setData({
        intervals: formatIntervals,
        tags: formatTags,
        products: products,
        bannerConfig: bannerConfig,
        'postForm.intervalId': formatIntervals[0].id,
        'postForm.productId': products[0].id,
      })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 停留时间费用
    getIntervalAmount() {
      if (this.data.intervals[this.data.intervalIndex] == undefined) {
        return 0
      }
      return this.data.intervals[this.data.intervalIndex].price
    },

    // 标签费用
    getTagAmount() {
      if (this.data.tags[this.data.tagIndex] == undefined) {
        return 0
      }
      return this.data.tags[this.data.tagIndex].price
    },

    onSuccessBanner(event) {
      this.setData({
        'postForm.coverUrl': event.detail.url
      })
    },

    // 显示停留时间选择器
    onShowInterval() {
      // 最小和最大
      const intervalStart = this.data.intervals[0].name
      const intervalEnd = this.data.intervals[this.data.intervals.length - 1].name
      this.setData({
        showInterval: true,
        intervalTip: `选择${intervalStart}-${intervalEnd}秒的停留时间，默认为${intervalStart}秒`,
      })
    },

    // 显示标签选择器
    onShowTag() {
      this.setData({
        showTag: true,
      })
    },

    // 显示程序选择器
    onShowProduct() {
      this.setData({
        showProduct: true,
      })
    },

    // 监听时间选择器滚动 存储下标
    onIntervalChange(event) {
      this.data.intervalIndex = event.detail.pickerIndex
    },

    // 监听标签选择器滚动 存储下标
    onTagChange(event) {
      this.data.tagIndex = event.detail.pickerIndex
    },

    // 监听程序选择器滚动 存储下标
    onProductChange(event) {
      this.data.productIndex = event.detail.pickerIndex
    },

    // 点击停留时间选择器的按钮
    onIntervalBtn(event) {
      const { index } = event.detail
      if (index == 1) {
        this.onIntervalConfirm()
      }
      this.onIntervalClose()
    },

    // 点击标签选择器的按钮
    onTagBtn(event) {
      const { index } = event.detail
      if (index == 1) {
        this.onTagConfirm()
      }
      this.onTagClose()
    },

    // 点击程序选择器的按钮
    onProductBtn(event) {
      const { index } = event.detail
      if (index == 1) {
        this.onProductConfirm()
      }
      this.onProductClose()
    },

    // 确认停留时间
    onIntervalConfirm() {
      const currentInterval = this.data.intervals[this.data.intervalIndex]
      this.setData({
        'postForm.intervalId': currentInterval.id,
        intervalIndex: this.data.intervalIndex
      })
    },

    // 确认标签
    onTagConfirm() {
      const currentTag = this.data.tags[this.data.tagIndex]
      this.setData({
        'postForm.tagId': currentTag.id,
        tagIndex: this.data.tagIndex
      })
    },

    // 确认程序
    onProductConfirm() {
      const currentProduct = this.data.products[this.data.productIndex]
      this.setData({
        'postForm.productId': currentProduct.id,
        productIndex: this.data.productIndex
      })
    },

    // 关闭停留时间
    onIntervalClose() {
      this.setData({
        showInterval: false
      })
    },

    // 关闭标签
    onTagClose() {
      this.setData({
        showTag: false
      })
    },

    // 关闭程序
    onProductClose() {
      this.setData({
        showProduct: false
      })
    },

    // 预览二维码
    onShowCode() {
      wx.previewImage({
        urls: [this.data.bannerConfig.payCode],
      })
    }
  }
})
